<template lang='pug'>
.fir(:style="{'width':width}" @click="getxi(data.id)")
    .boxcontent
        img(v-lazy="data.cover || '' ")
        p.name {{sp?data.name.substring(0,6)+'..':data.name}}
        p.flgc {{data.brief || ''}}
        .price ￥{{data.price || ''}}起
        button(v-if="flg==0") 立即购买
</template>
 
<script>
export default {
  name: "vueName",
  props:["data",'width','flg','sp'],
  data() {
    return {
      msg: "Welcome to your vueName",
      id: -1
    };
  },
  methods:{
      getxi(id){
        this.$router.push('/details?id='+id)
      }
  }
};
</script>
 
<style scoped lang="sass">
.fir 
    // width: 48%
    margin-top: .1rem
    background: #fff
    border-radius: .05rem
    overflow: hidden
    padding-bottom: .1rem
    .boxcontent
        width: 100%
        display: flex
        flex-direction: column
        align-items: center
        img
            width: 100%
            
        button
            width: 60%
            background: #ea625b
            line-height: .3rem
            color: #fff
            border-radius: .05rem
            font-weight: bold
        .name
            color: #000
            font-size: .14rem
            margin-top: .1rem
        .flgc
            width: 100%
            color: rgba(0,0,0,.54)
            font-size: .12rem
            overflow: hidden
            white-space: nowrap
            text-overflow: ellipsis
            text-align: center
        .price
            color: #ea625b
            font-size: .12rem
</style>